<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
        }

        .login_box {
            width: 360px;
            height: 500px;
            border: 2px black solid;
            margin-top: 120px;
            margin-left: 50px;
        }

        .login_light {
            width: 346px;
            height: 39px;
            text-align: center;
            border: 2px solid black;
            padding: 5px;
            background-color: #fff8f0;
            font-weight: bold;
            font-family: "宋体";
            font-size: 18px;
        }

        #login_tupain {
            float: left;
            margin: 12px;
        }

        .login_fusa {
            font-size: 12px;
            line-height: 39px;
            height: 39px;
            float: left;
        }

        .login_saoma {
            width: 346opx;
            height: 55px;
            line-height: 55px;
            text-align: center;
        }

        .login_saoma a {
            height: 55px;
            line-height: 55px;
            font-weight: bold;
            font-size: 18px;
            width: 173px;
            margin: 18px 20px;
            text-decoration: none;

        }

        #hui {
            color: gainsboro;
        }

        .kuanjia{
            width: 360px;
            height: 255px;
            border-bottom: solid #d3d3d3 1px;
            border-top:solid #d3d3d3 1px ;
        }

        .login_denglu1{
            
            background: url(img/02.png) no-repeat left center;
            
            line-height: 38px;
            margin-top: 35px;
            text-align: center;
        }
        

        #login_input{
            width:265px;
            height:38px;
            padding-left: 50px;
        }

        .login_denglu2{
            width: 360px;
            background:url(img/03.png) no-repeat;
            padding-top:20px;
            text-align: center;
            line-height: 38px;
        }

        #login_mimakuan{
            
            width:265px;
            height:38px;
            padding-left: 50px;
        }

        .login_denglu3 a{
            margin-top: 20px;
            font-size: 15px;
            float: right;
            margin-right: 25px;
            text-decoration:none;
            font-weight: bold;
            color: black;
        } 

        #feisheng{
            width: 319px;
            height: 44px;
            font-size: 20px;
            line-height: 44px;
            margin-top: 20px;
            margin-left: 20px;
            color: floralwhite;
            text-align: center;
            background: crimson;
            border: 1px solid #e85356;
        }
        .tusen{
            width: 360px;
            height: 50px;
        }

        .tusen span{
            margin-left: 20px;
            margin-top: 20px;
            float: left;
        }

        .tusen img{
            padding-right: 5px;
            margin-top: 20px;
            margin-left:20px;
            float: left;
            width:20px;
            height:20px;
        }

        #QQ{
            line-height: 60px;
            float: left;
            font-size: 15px;
            text-decoration:none;
        }

        #WX{
            line-height: 60px;
		    float: left;
			font-size: 15px;
            text-decoration:none;
        }

        #ZC{
            line-height: 60px;
            float: left;
            text-decoration:none;
        }
    </style>

</head>

<body>
    <!--  需求：
        实现如下所示的京东登陆页，图片素材见`01文件夹 -->

    <div>
        <div class="login_box">
            <div class="login_light">

                <img id="login_tupain" src="./01/img/01.png" />
                <p class="login_fusa">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>

            </div>
            <div class="login_saoma">
                <a href="#">扫码登陆</a>
                <span id="hui">|</span>
                <a href="#" style="color: red;">账户登录</a>
            </div>
            <form>
                <div class="kuanjia">
                    <div class="login_denglu1">
                        <input id="login_input" type="text" placeholder="邮箱/用户名/登录手机" />
                    </div>
                    <div class="login_denglu2">
                        <input id="login_mimakuan" type="password" placeholder="密码" />
                    </div>
                    <div class="login_denglu3">
                        <a href="#">忘记密码</a>
                    </div>
                    <div class="login_denglu4">
                        <input id="feisheng" type="button" value="登&emsp;录" />
                    </div>
                </div>
            </form>
            <div class="tusen">
                <img src="img/04.png" />
                <a id="QQ" href="#">QQ</a>
                <span>|</span>
                <img src="img/05.png" />
                <a id="WX" href="#">微信</a>
                <img style="margin-left: 80px;" />
                <a id="ZC" href="#" style="color: #b61d1d;">立即注册</a>
            </div>
            <div style="clear:both"></div>
          
        </div>
        
    </div>
</body>
<script>
    document.getElementById("feisheng").addEventListener("click",function(){
        let key =document.getElementById("login_input").value;
        let password =document.getElementById("login_mimakuan").value;

        //保存用户名输入的值
        localStorage.setItem(key,key);

        //保存密码输入的值
        localStorage.setItem("pass",password);

    })

    window.onload=function(){

        document.getElementById("login_input").value = localStorage.getItem(key);

        document.getElementById("login_mimakuan").value = localStorage.getItem("pass");
    }

</script>

</html>